<!-- eslint-disable vue/no-parsing-error -->
<!-- eslint-disable vue/valid-v-bind -->
<template>
  <div class="login-container">
    <div class="header">
      <img class="header__logo" src="./img/login-logo.jpg" alt="logo">
      <!-- <p class="header__title">waynboot-mall</p> -->
    </div>

    <van-form class="form" @submit="onSubmit">
      <van-field
        v-model="form.mobile"
        type="number"
        required
        clearable
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          {
            validator: checkPhone,
            required: true
          },
        ]"
      />

      <van-field
        v-model="form.password"
        type="password"
        required
        center
        clearable
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true }]"
      />
      <van-field required :rules="[{ required: true,message:'请勾选同意' }]">
        <template #input>
          <van-checkbox v-model="checked" shape="square">
            <div style="font-size:12px;line-height:20px;">
              <span>同意</span>
              <router-link to="/notice/list/2"><span class="colorB">《用户协议》</span> </router-link>
              <span>和</span>
              <router-link to="/notice/list/1"><span class="colorB">《购买及委托代卖协议》</span></router-link>
              <span>登录平台</span>
            </div>
          </van-checkbox>
        </template>
      </van-field>

      <div style="margin: 36px">
        <van-button
          round
          block
          :loading="loading"
          type="info"
          loading-text="登录中..."
          native-type="submit"
        >登录</van-button>
      </div>
      <div style="width:100%; display: flex;align-items: center;justify-content: space-between;">
        <van-button
          style="width: 30%;"
          plain
          round
          block
          type="info"
          native-type="button"
          to="/forget"
        >忘记密码</van-button>
        <van-button
          style="width: 30%;"
          plain
          round
          block
          type="info"
          native-type="button"
          to="/registry"
        >注册账号</van-button>

      </div>

    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
import Beian from '@/components/beian/Beian.vue';
export default {
  name: 'Login',
  components:{
    Beian
  },
  data() {
    return {
      form: {
        mobile: '',
        password: ''
      },
      checked: false,
      loading: false
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = (route.query && route.query.redirect) || process.env.VUE_APP_BASE_PATH
      },
      immediate: true
    }
  },
  methods: {
    toAgree(type) {
      this.$router.push('/user/argeement?type=' + type)
    },
    checkBoxes() {
      if (this.checked) {
        return true
      }
      return false
      // this.$toast.fail()
    },
    // 校检手机号
    checkPhone(num) {
      if (num === 123456789) return true
      const reg = /^[1][3,4,5,7,8,9,2,6][0-9]{9}$/
      if (reg.test(num)) {
        return true
      }
      return false
    },
    // 提交
    onSubmit() {
      this.loading = true
      this.$store
        .dispatch('user/login', this.form)
        .then(() => {
          this.$store.dispatch('address/getList')
          this.$notify({
            type: 'success',
            message: '登录成功',
            duration: 1000,
            onOpened: () => {
              // location.href = this.redirect
              window.open(this.redirect,'_self')
            },
            onClose: () => {
              // location.href = this.redirect
              window.open(this.redirect,'_self')
            }
          })
        })
        .catch((e) => {
          this.$toast.fail(e.message)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-checkbox{
  margin-top: 10px;
}
.colorB{
  color: blue;
}
.van-checkbox__label{
  span{
    line-height: 20px;
  }
}
.login-container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .header__logo {
      display: block;
       width: 300px;
       height: 280px;
      padding-top: 80px;
    }
    .header__title {
      font-size: 36px;
      color: #000;
      font-weight: normal;
      padding-top: 30px;
    }
  }

  .form {
    // background: red;
    padding: 24px;
    // margin-top: 50px;
  }
}
</style>
